<template>
      <div class="clander">
              <div class="clander_week">
                <div class="clander_witem" 
                v-for="(item) in weeks"
                :key="item"
                >
                    <div>
                        {{item}} 
                    </div>
                </div> 
              </div>
             
              <div class="clander_list"> 
               <TransitionGroup  class="wraps" name="list" > 
                <div class="clander_item" 
                v-for="(item,index) in clanderArr"
                :key="index"
                >
                    <div v-if="Object.keys(item).length" 
                    :class="[Object.keys(item).length?'':'default'
                     ,{'newday':nowY==item.y && nowM==item.m && nowD==item.day}
                  ]"
                    
                    >
                          <div><span>{{item.hours?`+${item.hours}h`:''}}</span><span v-if="item.isMark"><el-icon><Select style="color: #F02FC2;"/></el-icon></span></div>
                          <div><span>{{nowY==item.y && nowM==item.m && nowD==item.day?'今天':item.day}}</span></div>
                          <div>
                            <el-tooltip
                                class="box-item"
                                effect="light"
                                content="Top Left prompts info"
                                placement="bottom"
                            > 
                              <template #content>
                                <ul class="tiplists">
                                    <li v-for="(sm) in item.textlist" :key="sm">
                                        <el-tag v-if="sm.type=='add'" type="danger">加班</el-tag>
                                        <el-tag v-else type="success">进度</el-tag>
                                        {{sm.text}}</li>
                                </ul> 
                              </template>
                              <div class="dots">
                                <span v-for="(sm) in item.textlist" :key="sm.text" :class="[sm.type=='add'?'adds':'']"></span>
                              </div> 
                            </el-tooltip>
                          </div>
                    </div>
                    <div v-else class="default"></div>
                </div>
                 
            </TransitionGroup>
            <div class="clander_item"
                  v-if="clanderArr.length==35"
                  v-for="(item,index) in 7"
                  :key="index"
                 >
                  <div class="default"></div>
                </div>
              </div>
          
      </div>
  </template>
  
<script setup lang="ts"> 
import { defineProps,PropType,ref,watch,Ref} from 'vue';
   type initFn = (y:number | unknown,m:number | unknown)=>void;
   interface ObjTYpe{y:Number,m:Number,day:number,isWeek:Boolean,textlist:Array<string>}
   const allDatas = ref({});
   const clanderArr =  ref<any>()
   const props = defineProps({
         mouth:Number as PropType<Number>,
         year:Number as PropType<Number>,   
         datas:{}     
   })

  //  获取今天
  let dates = new Date();
   let nowY = ref(dates.getFullYear());
   let nowM  = ref(dates.getMonth()+1);
   let nowD = ref(dates.getDate());

   const weeks = ['周一','周二','周三','周四','周五','周六','周日'] as Array<string>
    /**
     * 
     * @param y 年
     * @param m 月
     */
    const initClander:initFn = (y,m)=>{
         if(typeof y == 'number' && typeof m == 'number'){ 
            let date  = new Date(y,m,0).getDate();
            let preday = new Date(y,m-1,1).getDay();
            let nextday = new Date(y,m-1,date).getDay();
            // 获取到第一天与最后一天分别是周几
            renderClender(preday,date,nextday) 
         }  
   }
   /**
    * 
    * @param pre 上一个月
    * @param total 本月总数
    * @param next 下个月
    */
   const renderClender = (pre,total,next)=>{ 
    console.log(pre,total,next)
         let predays =  pre==0?6:pre-1;
         let nextdays = next==0?0:weeks.length-next;
         let result = [] as Array<ObjTYpe>;
         let preArr = Array(predays)?.fill({});
         let nextArr = Array(nextdays).fill({});
         for(let n = 0;n<total;n++){
                 let obj = {
                     y:props.year,
                     m:props.mouth,
                     day:n+1,
                     isWeek:isWeekFn(n+1),
                     hours:allDatas.value[n+1]?allDatas.value[n+1].hours:0,
                     isMark:allDatas.value[n+1]?true:false,
                     textlist:allDatas.value[n+1]?allDatas.value[n+1].lists:[]
                 } as ObjTYpe 
                 result.push(obj); 
         } 
         clanderArr.value = [...preArr,...result,...nextArr];
   }
   /**
    * 判断是否为周末
    * @param n 日期
    */
   const isWeekFn = (n)=>{ 
       if(typeof props.year == 'number' && typeof props.mouth == 'number'){
          
           if(new Date(props.year,props.mouth-1,n).getDay()==0||new Date(props.year,props.mouth-1,n).getDay()==6) return true;
       }
       return false;
   }
   watch([()=>props.mouth,()=>props.year,()=>props.datas],()=>{
        

        
        allDatas.value = props.datas[props.year]?props.datas[props.year][props.mouth]?props.datas[props.year][props.mouth]:[]:[] 
        initClander(props.year,props.mouth) 
    },{immediate:true})
 
  </script>
  
  <style lang="scss" scoped >
    .list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
.newday{
   
  background-color: #a5b4fc !important;
  &>div:nth-of-type(2)>span{
    color: #6366f1;
    font-weight: bold;
  }
}
   .tiplists{
       min-width: 100px;
       &>li{
        margin: .3rem 0;
        max-width: 300px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        &:hover{
            background: #d3e3f3;
        }
        
       }
   }
   .clander{
       width: 100%;
       height: auto;
      //  padding:0 1rem;
      background: #fff;
       &_week{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(7,1fr);
            .clander_witem{ 
            text-align: center;
            font-size: .8rem;
            color: #666;
            font-weight: bold;
           }
           margin-bottom: .5rem;
           background: #fff;
           padding: 1rem .1rem;
           border-radius: 8px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
       }
       .default{
         background: rgb(235, 234, 234) !important;
       }
       &_list{
           display: grid;
           grid-template-columns: repeat(7,1fr);
           height: 60vh; 
           .clander_item{ 
            // text-align: center;
            font-size: .8rem;
            color: #666;
            padding: .2rem;
            box-sizing: border-box;
            &>div{
                 height: 55px;
                 cursor: pointer;
                 border-radius: 5px;
                 background: rgba(12, 103, 240, 0.301);
                 width: 100%; 
                 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
                 padding:.1rem .1rem;
                 box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 border: 1px solid #fff;
                 transition: all .2s ease 0s;
                 &:hover{
                  border: 1px solid rgba(12, 103, 240, 1);
                 }
                 &>div:nth-of-type(1){
                     display: flex;
                     justify-content: space-between; 
                     color: #fff;
                     align-items: center;
                     
                     &>span:nth-of-type(1){
                          font-size: .3rem;
                          color: #007fff;
                          margin-right: .8rem;
                     }
                     &+div{
                         font-size: .8rem;
                         text-align: center;
                         color: rgb(33, 40, 54);
                         font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                     }
                 }
                 .dots{
                     display: flex;
                     justify-content: center;
                     &>span{
                        display: inline-block;
                        width: 5px;
                        height: 5px;
                        border: 1px solid #6366f1;
                        margin: 0 .1rem;
                        border-radius: .5rem;
                        cursor: pointer;
                     }
                 }
            } 
           }
       } 
   }
  </style>